<template>
<view class=" xd sjh" style="height: 100vh">
  <up-navbar
      title="用户登录"
      @leftClick="rightClick"
      :autoBack="false"
  >
  </up-navbar>
<!--  头部logo-->
  <view class="jz_flex">
    <view style="margin-top: 20vh">
      <view class="wz_jz">
        <image src="https://xdjzapi.towngo.cn/uploads/images/wx/202508/24/xcx_1756029474_yaWYmwzZBt.jpg"
               style="width: 120px;height: 120px;border-radius: 50px;"/>
      </view>
    </view>
  </view>
  <view class="spjz_flex">
    <view class="disp" style="padding: 5vh 0">
      <view class="fz_18">
        <view class="fz_24">你好，</view>
        <view class="em fz_20 mag_t-10">
          <text>欢迎使用「 鲜到家族 」</text>
        </view>
      </view>
    </view>
  </view>
  <!--  两个登录按钮-->
  <view class="login_phone an_button">
<!--    <view class="wz_white xd fz_14 boxs wh_8 jz bor_25 mag_t-20 "-->
<!--          style="background-color: #3a9e5f!important;height: 45px">-->
<!--      <view class="whe_max jz_flex" @click="wxGo">微信授权</view>-->
<!--      <view @click="addisTrue" v-if="!isTrue" class="jd" style="opacity: 0.1;border-radius: 20px;width: 100%;height: 100%;top: 0;left: 0;background-color: silver"></view>-->
<!--    </view>-->


    <view class="wh_8 jz mag_t-20 an_button sjh xd">
      <up-button type="primary" text="手机号一键登录"
                 open-type="getPhoneNumber"
                 @getphonenumber="phoneGo"
                 color="#d5f0dd"
                 @click="getPhone"
                 customStyle="color:#3a9e5f;border-radius:50px;height:45px">
      </up-button>
      <view @click="addisTrue" v-if="!isTrue" class="jd" style="opacity: 0.1;border-radius: 20px;width: 100%;height: 100%;top: 0;left: 0;background-color: silver"></view>
    </view>
  </view>
  <!--  我已阅读并同意-->
  <view class="fz_12 jd" style="color: #2a5caa;bottom: 50px;left: 0;width: 100%">
    <view class="wh_8 jz fz_12 jz">
      <view class="wh_f">
        <view class="czjz_flex">
          <up-checkbox
              :customStyle="{marginBottom: '8px'}"
              label=""
              name="agree"
              class="centerdq"
              usedAlone
              v-model:checked="isTrue"
          >
          </up-checkbox>
        </view>
        <view class="flex_1 czjz_flex fz_14">
          <view>
            <text class="wz_hui">我已阅读并同意</text>
            <text @click="addXY"> 用户服务协议</text>
            <text class="wz_hui">、</text>
            <text @click="addXY">隐私政策</text>
          </view>
        </view>
      </view>
    </view>
  </view>
  <up-toast ref="uToastRef"></up-toast>
  <u-popup :overlay="true" :show="Status" mode="bottom"
           round="10"
           @close="close" @open="open">
    <view class="wz_leftdq"
          style="padding: 20px;border-radius: 10px 10px 0;">
      <view class="fz_14" style="">鲜到家族 申请</view>
      <view style="font-size: 20px;margin-top: 10px">获取你的昵称、头像</view>
      <view style="display: flex;padding: 20px 0">
        <view style="width: 70px">
          <image :src="userInfo.userInfo.avatarUrl"
                 style="width: 50px;height: 50px;border-radius: 5px;text-align: center"></image>
        </view>
        <view class="wz_leftdq" style="flex: 1">
          <view style="padding-bottom: 6px">{{ userInfo.userInfo.nickName }}</view>
          <view class="fz_12" style="color: #bfbbbb">微信个人信息</view>
        </view>
      </view>
      <view class="ddisp">
        <view style="width: 50%">
          <view style="width: 120px;margin: 0 auto">
            <up-button text="拒绝" style="color: #5ac725" @click="close"></up-button>
          </view>
        </view>
        <view style="width: 50%">
          <view style="width: 120px;margin: 0 auto">
            <up-button type="success" text="允许" @click="openLogin"></up-button>
          </view>
        </view>
      </view>
    </view>
  </u-popup>
</view>
</template>
<script>

import {login} from "../../Api/user";

export default {
  name: "index",
  data(){
    return{
      radiolist1: [
        {
          name: '苹果',
          disabled: false
        }
      ],
      isTrue:false,
      userInfo:{
        userInfo:{}
      },
      checkList:[{id:1}],
      user_detail:{},
      Status:false,
      loginCode:'',
      msg:12332
    }
  },
  onShow() {
    uni.removeStorageSync('userToken');
  },
  methods:{
    addXY(){
      uni.navigateTo({
        url: '/pagesList/protocol/index'
      });
    },
    addisTrue(){
      if(!this.isTrue){
        this.showToast("请阅读并同意用户服务协议与隐私协议")
      }
    },
    rightClick(){
      uni.reLaunch({
        url: '/pages/index/index'
      });
    },
    close(){
      this.Status = false
    },
    getPhone(){
      let tthis = this
      uni.getUserProfile({
        desc: '用于完善会员资料', // 必填，必须告知用户需要获取的信息用途
        success: (res) => {
          uni.login({
            provider: 'weixin',
            success: function (res) {
              tthis.loginCode = res.code
              // TODO: 根据实际需求进行后续操作，如获取用户信息、跳转到其他页面等。
            },
            fail: function (res) {
              // 登录失败，处理错误信息
              console.log(res.errMsg)
              console.log(res.code)
            },
          })
          console.log('用户信息',res);
        },
        fail: (res) => {
          console.log("用户拒绝了请求", res);
          // 用户拒绝提供信息时的处理逻辑
        }
      });
    },
    // 手机号登录
    phoneGo(e){
      let tthis = this
        if (this.isTrue!=='') {
          if(e.detail.errMsg === 'getPhoneNumber:ok'){
            console.log('状态',e)
            this.user_detail = e.detail
            this.user_detail.code = this.loginCode
            setTimeout(()=>{
              login(e.detail).then(res=>{
                uni.setStorageSync('userToken', res.access_token);
                setTimeout(()=>{
                  uni.navigateBack({
                    delta: 1  // delta 表示返回的页面数，1 表示返回上一页
                  })
                },1000)
              })
            },1000)

          }else{
            this.showToast("取消登录")
          }
        } else {
          this.showToast("请确认用户协议和隐私政策。")
        }
    },
    //消息提示
    showToast(msg, type = "default") {
      uni.showToast({
        title: msg,
        icon: "none", // 图标类型，可选值：success, none
        duration: 2000 // 显示时间，单位毫秒
      });
    },
    // 允许登录
    openLogin(){
        uni.login({
          provider: 'weixin',
          success: function (res) {
            login({code:res.code}).then(res=>{
              console.log('登录结果',res)
              uni.setStorageSync('userToken', res.access_token);
              uni.navigateBack({
                delta: 1  // delta 表示返回的页面数，1 表示返回上一页
              })
            })
          // 登录成功，获取到用户信息
            console.log(res.errMsg)
            console.log(res.code)
          // TODO: 根据实际需求进行后续操作，如获取用户信息、跳转到其他页面等。
          },
          fail: function (res) {
            // 登录失败，处理错误信息
            console.log(res.errMsg)
            console.log(res.code)
          }
        })
    },
    // 微信登录
    wxGo(){
      if (this.isTrue!=='') {
        uni.getUserProfile({
          desc: '用于完善会员资料', // 必填，必须告知用户需要获取的信息用途
          success: (res) => {
            this.userInfo = res
            this.Status = true
            console.log('用户信息',res);
          },
          fail: (res) => {
            console.log("用户拒绝了请求", res);
            // 用户拒绝提供信息时的处理逻辑
          }
        });
      } else {
        this.showToast("请确认用户协议和隐私政策。")
      }
    }
  },
  onBackPress() {
    // 返回首页
    uni.reLaunch({
      url: '/pages/index/index' // 确保url是正确的
    });
    return true; // 返回 true 以阻止默认的返回动作
  }
}
</script>
<style lang="scss">
.sjh{
  ::v-deep.u-button{
    border-radius: 20px!important;
  }
  ::v-deep.u-reset-button{
    border-radius: 20px!important;
  }
  ::v-deep.data-v-461e713c{
    border-radius: 20px!important;
  }
  ::v-deep.u-square{
    border-radius: 20px!important;
  }
  ::v-deep.u-normal{
    border-radius: 20px!important;
  }
}

.an_button{
  ::v-deep.u-reset-button{
    border-radius: 50px!important;
    color: #3a9e5f!important;
  }
  ::v-deep.u-button{
    border-radius: 50px!important;
    color: #3a9e5f!important;
  }
  ::v-deep.u-square{
    border-radius: 50px!important;
    color: #3a9e5f!important;
  }
  ::v-deep.u-normal{
    border-radius: 50px!important;
    color: #3a9e5f!important;
  }
}
.login_phone{
  ::v-deep .u-button--primary {
    border-radius: 25px!important;
    padding: 10px;
    font-size: 16px;
    background-color: #3a9e5f!important; /* 设置按钮背景色为绿色 */
  }
}
.custom-style {
  color: #ff0000;
  width: 400rpx;
}
</style>
